<script>
import VueQr from 'vue-qr'
export default {
  name: 'Index',
  components: {
    VueQr
  },
  data () {
    return {
      content: '', // 输入框输入的内容
      text: '', // 二维码实际内容
      logoSrc: '', // 二维码中间的图片
      randomColor: 'black', // 二维码颜色
      qrCodeUrl: '', // 存放生成的二维码url
      isShowDialog: false, // 上传的图片预览dialog
      imageUrl: '' // 上传图片的临时显示链接
    }
  },
  created () {
    // 初始化显示
    this.content = 'https://livequeen.top'
    this.text = this.content
  },
  methods: {
    qrCodeCallback (url) {
      this.qrCodeUrl = url
    },
    handleQrCode (type) {
      // 判断输入框的二维码内容是否为空，不为空才生成二维码
      if (this.content === '') {
        this.$message.error('二维码内容不能为空')
      } else {
        // 将输入框内容，更新到二维码内容
        this.text = this.content
        // 判断按钮选项
        switch (type) {
          case 1:
            this.logoSrc = ''
            break
          case 2:
            this.$refs.chartImage.dispatchEvent(new MouseEvent('click'))
            break
          case 3:
            let name = new Date().getTime()
            let img = document.createElement('a')
            img.style.display = 'none'
            img.download = name
            img.href = this.qrCodeUrl
            document.body.appendChild(img)
            img.click()
            img.remove()
            break
          case 4:
            this.logoSrc = this.imageUrl
            this.isShowDialog = false
            break
        }
      }
    },
    // 选中图片后初步守卫
    showUpload () {
      let file = this.$refs.chartImage.files[0]
      // 文件格式大小判断处理
      const isJPG = file.type === 'image/jpeg' | file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }

      // 格式无误后，预览文件处理
      this.imgSaveToUrl(file)
      this.isShowDialog = true
      // 复刻文件信息
      this.files = file
    },
    // 获取选中图片的预览路径，并赋值给本地img路径，在前端展示
    imgSaveToUrl (file) {
      // 获取上传图片的本地URL，用于上传前的本地预览，转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.imageUrl = URL.createObjectURL(file)
      console.log('图片预览地址：', this.imageUrl)
    },
    // 关闭卖出的dialog事件
    diaClose () {
      this.isShowDialog = false// 关闭窗口
    }
  }
}
</script>
